<template>
  <div>
    <div class="operate">
      <Select
        v-model="selectedResourceNames"
        clearable
        filterable
        :placeholder="$t('t_resource_placeholder')"
        style="width: 300px"
      >
        <Option v-for="name in resourceNames" :value="name" :key="name">{{ name }}</Option>
      </Select>
      <Button type="primary" size="small" @click="getDebugInfo">刷新数据</Button>
    </div>
    <Table
      :loading="loading"
      border
      size="small"
      :columns="tableColumns"
      :data="finallyTableData"
      :max-height="MODALHEIGHT"
    ></Table>
    <Modal v-model="dataDetail.isShow" :fullscreen="fullscreen" width="800" :mask-closable="false" footer-hide>
      <p slot="header">
        <span>{{ $t('t_detail') }}</span>
        <Icon v-if="!fullscreen" @click="fullscreen = true" class="header-icon" type="ios-expand" />
        <Icon v-else @click="fullscreen = false" class="header-icon" type="ios-contract" />
      </p>
      <div :style="{ overflow: 'auto', 'max-height': fullscreen ? '' : '500px' }">
        <pre>{{ dataDetail.data }}</pre>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getDebugInfo } from '@/api/server'
export default {
  name: '',
  data () {
    return {
      MODALHEIGHT: 500,
      fullscreen: false,
      dataDetail: {
        isShow: false,
        data: {}
      },
      loading: false,
      tableColumns: [
        {
          title: this.$t('t_region'),
          key: 'regionId'
        },
        {
          title: this.$t('t_resource'),
          key: 'resourceTitle'
        },
        {
          title: this.$t('t_resource_asset_id'),
          key: 'resourceAssetId'
        },
        {
          title: this.$t('t_resource_id'),
          key: 'resourceId'
        },
        {
          title: this.$t('t_tf_file'),
          width: 300,
          render: (h, params) => {
            return (
              <div>
                <div style="display:inline-block;width: 200px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
                  {params.row.tfFile}
                </div>
                {params.row.tfFile !== '' && (
                  <Button
                    onClick={() => {
                      this.showInfo(params.row.tfFile)
                    }}
                    style="vertical-align: top;"
                    icon="ios-search"
                    type="primary"
                    ghost
                    size="small"
                  ></Button>
                )}
              </div>
            )
          }
        },
        {
          title: this.$t('t_tf_state_file'),
          width: 300,
          render: (h, params) => {
            return (
              <div>
                <div style="display:inline-block;width: 200px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
                  {params.row.tfStateFile}
                </div>
                {params.row.tfStateFile !== '' && (
                  <Button
                    onClick={() => {
                      this.showInfo(params.row.tfStateFile)
                    }}
                    style="vertical-align: top;"
                    icon="ios-search"
                    type="primary"
                    ghost
                    size="small"
                  ></Button>
                )}
              </div>
            )
          }
        }
      ],
      tableData: [],
      resourceNames: [],
      selectedResourceNames: '',
      intervalId: null
    }
  },
  computed: {
    finallyTableData () {
      if (this.selectedResourceNames) {
        return this.tableData.filter(item => item.resourceTitle === this.selectedResourceNames)
      }
      return this.tableData
    }
  },
  mounted () {
    this.MODALHEIGHT = document.body.scrollHeight - 200
    this.getDebugInfo()
    this.intervalId = setInterval(() => {
      this.getIntervalDebugInfo()
      this.$Notice.success({
        title: this.$t('t_refresh_success_tips'),
        duration: 3
      })
    }, 3 * 60 * 1000)
  },
  methods: {
    async getDebugInfo () {
      this.loading = true
      const { statusCode, data } = await getDebugInfo()
      this.loading = false
      if (statusCode === 'OK') {
        this.tableData = data || []
        this.resourceNames = Array.from(new Set(data.map(item => item.resourceTitle)))
      }
    },
    showInfo (data) {
      this.dataDetail.data = ''
      this.dataDetail.isShow = true
      this.dataDetail.data = JSON.parse(data)
    },
    async getIntervalDebugInfo () {
      const { statusCode, data } = await getDebugInfo()
      if (statusCode === 'OK') {
        this.tableData = data || []
        this.resourceNames = Array.from(new Set(data.map(item => item.resourceTitle)))
      }
    }
  },
  beforeDestroy () {
    clearInterval(this.intervalId)
  },
  components: {}
}
</script>

<style scoped lang="scss">
.operate {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.header-icon {
  float: right;
  margin: 3px 40px 0 0 !important;
}
</style>
